<template>
	<coreshop-page title="地址管理 " mode="left">
		<view class="layout-address-box">
			<view class="address-box" v-if="state.list.length > 0">
				<view class="list-box" v-for="item in state.list" :key="item.id">
					<view class="address-msg" @click="handleSelectAddress(item)">
						<view class="name-box">
							<text v-if="item.isDefault" class="tag">默认</text>
							<text class="name">{{ item.name }}</text>
							<text class="mobile">{{ item.mobile }}</text>
						</view>
						<view class="adress">
							{{ item.areaName }} {{ item.street }} {{ item.address }}
						</view>
					</view>
					<view class="address-icon">
						<uv-icon name="edit-pen-fill" size="22"
							@click="handleRouteNavigateTo(`/pages/subpackage/member/address/index/index?id=${item.id}`)"></uv-icon>
						<uv-icon name="trash-fill" size="22" @click="handleDeleteShip(item.id)"></uv-icon>
					</view>
				</view>
			</view>
			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.address" text="暂无地址"></coreshop-empty>
			</view>

			<coreshop-fixed-bottom-button :radius="100" title="新增地址"
				@onClick="handleRouteNavigateTo(`/pages/subpackage/member/address/index/index?type=${AddressPageTitltEnum.add}`)"></coreshop-fixed-bottom-button>

		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { queryUserShip, queryRemoveShip } from '@/core/api';
	import type { Response, AddressType } from '@/core/models';
	import { EmptyEnum, AddressPageTitltEnum } from '@/core/enum';
	import { handleRouteNavigateTo, handleShowToast } from '@/core/utils';
	import { addressUserShip } from '@/core/consts';

	interface QueryParams {
		type : string;  /** 值 select */
	}

	const state = reactive<{
		list : Array<AddressType>;
		totalPages : number;
		page : number,
		id : number | string;
		type : string,
	}>({
		list: [],
		totalPages: 1,
		page: 1,
		id: "",
		type: "",
	})

	onShow(() => {
		/** 获取地址列表 */
		getUserShip()
	});

	onLoad((query : QueryParams) => {
		state.type = query?.type || '';
	})

	/** 获取地址列表 */
	const getUserShip = async () => {
		uni.showLoading({
			title: "加载中..."
		})
		const userShip : Response<Array<AddressType>> = await queryUserShip()
		state.list = userShip?.data;
		uni.hideLoading();
	}

	/** 删除地址 */
	const handleDeleteShip = (id : number) => {
		uni.showModal({
			title: '提示',
			content: '您确定要删除此地址？',
			async success(res : any) {
				if (res.confirm) {
					const ship = await queryRemoveShip({ id, });
					if (ship.status) {
						handleShowToast(ship.msg, 'success', () => {
							setTimeout(() => {
								getUserShip();
							}, 1500)
						})
					}
				} else if (res.cancel) {
				}
			}
		});
	}

	/** 选择地址 */
	const handleSelectAddress = (item : AddressType) => {
		if (state.type == 'select') {
			uni.setStorageSync(addressUserShip, item);
			uni.navigateBack({
				delta: 1
			});
		}
	}
</script>
<style lang="scss" scoped>
	@import './list.scss';
</style>